<template>
  <div class="quick-reply-manage-page">
    <div class="header">
      <h2>快捷回复管理</h2>
      <el-button type="primary" @click="openEditDialog()">新增快捷回复</el-button>
    </div>
    <el-card>
      <el-table :data="filteredReplies" style="width: 100%">
        <el-table-column prop="content" label="内容" min-width="200" />
        <el-table-column prop="group" label="分组" width="120" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteReply(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px;">
        <el-select v-model="searchGroup" placeholder="筛选分组" style="width: 160px;">
          <el-option label="全部" value="" />
          <el-option v-for="g in groups" :key="g" :label="g" :value="g" />
        </el-select>
      </div>
    </el-card>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialog.visible" :title="editDialog.data ? '编辑快捷回复' : '新增快捷回复'" width="400px">
      <el-form :model="editDialog.form" label-width="60px">
        <el-form-item label="内容">
          <el-input v-model="editDialog.form.content" type="textarea" :rows="3" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="分组">
          <el-select v-model="editDialog.form.group" placeholder="请选择分组">
            <el-option v-for="g in groups" :key="g" :label="g" :value="g" />
            <el-option label="新建分组..." value="__new__" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="editDialog.form.group === '__new__'" label="新分组">
          <el-input v-model="editDialog.form.newGroup" maxlength="20" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="saveReply">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const groups = ref(['常用', '售后', '物流', '投诉'])
const replies = ref([
  { id: 1, content: '您好，请问有什么可以帮您？', group: '常用' },
  { id: 2, content: '您的问题已收到，我们会尽快处理。', group: '常用' },
  { id: 3, content: '感谢您的反馈，祝您生活愉快！', group: '常用' },
  { id: 4, content: '您的订单已发货，请注意查收。', group: '物流' },
  { id: 5, content: '如有疑问，欢迎随时联系。', group: '售后' }
])
const searchGroup = ref('')
const filteredReplies = computed(() => {
  if (!searchGroup.value) return replies.value
  return replies.value.filter(r => r.group === searchGroup.value)
})

const editDialog = ref({ visible: false, data: null as any, form: { content: '', group: '', newGroup: '' } })
function openEditDialog(row?: any) {
  if (row) {
    editDialog.value.data = row
    editDialog.value.form = { content: row.content, group: row.group, newGroup: '' }
  } else {
    editDialog.value.data = null
    editDialog.value.form = { content: '', group: '', newGroup: '' }
  }
  editDialog.value.visible = true
}
function saveReply() {
  const { content, group, newGroup } = editDialog.value.form
  if (!content.trim()) {
    ElMessage.warning('请输入内容')
    return
  }
  let finalGroup = group
  if (group === '__new__') {
    if (!newGroup.trim()) {
      ElMessage.warning('请输入新分组')
      return
    }
    if (!groups.value.includes(newGroup)) groups.value.push(newGroup)
    finalGroup = newGroup
  }
  if (editDialog.value.data) {
    editDialog.value.data.content = content
    editDialog.value.data.group = finalGroup
    ElMessage.success('编辑成功')
  } else {
    replies.value.push({ id: Date.now(), content, group: finalGroup })
    ElMessage.success('新增成功')
  }
  editDialog.value.visible = false
}
function deleteReply(row: any) {
  replies.value = replies.value.filter(r => r.id !== row.id)
  ElMessage.success('删除成功')
}
</script>

<style scoped>
.quick-reply-manage-page {
  padding: 24px;
  background: #f7f8fa;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.header h2 {
  margin: 0;
  color: #333;
}
</style> 